<template>
  <div class="h-100 text-center">
    <div class="d-flex h-100 p-3 mx-auto flex-column">

      <main v-show="!activity">
        <div class="mt-5">
          <i class="el-icon-warning icon-msg-warning"></i>
        </div>
        <div class="mt-3">
          <h5>暂无权限报名</h5>
          <p class="text-secondary">由于您还不是会员用户，请在电脑上申请成为会员用户后再进行报名</p>
        </div>
      </main>

      <main v-show="activity.activityStatus === 'NOT'">
        <div class="mt-5">
          <i class="el-icon-warning icon-msg-warning"></i>
        </div>
        <div class="mt-3">
          <h5>活动尚未开始</h5>
        </div>
        <el-button type="success" class="btn-block" @click="goList()">返回活动列表</el-button>
      </main>

      <main v-show="activity.activityStatus === 'END'">
        <div class="mt-5">
          <i class="el-icon-warning icon-msg-warning"></i>
        </div>
        <div class="mt-3">
          <h5>活动已经结束</h5>
        </div>

        <el-button type="success" class="btn-block" @click="goList()">返回活动列表</el-button>
        <el-button class="btn-block ml-0" @click="goLogin()">查看报名详情</el-button>
      </main>

      <footer class="mastfoot mt-auto">
        <div class="inner text-muted">
          <p class="mb-1">
            陕西土豆数据科技有限公司
          </p>
          <p class="mb-1">
            Copyright © 2008  All Rights Reserved
          </p>
        </div>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  name: "formdenied",
  title: "无权限报名",
  props: {
    activity: {}
  },
  data () {
    return {}
  },
  methods: {
    goList () {
      this.$router.replace({name: 'eventlist'})
    },
    goLogin() {
      this.$router.replace({name: 'login', params: {activityId: this.activity.activityId}})
    }
  }
}
</script>

<style lang="less">
</style>
